<template>
	<div class="echarts-box">
		<div id="echarts-hygrometer" :style="{ width: '300px', height: '250px' }"></div>
	</div>
</template>


<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, onUpdated } from 'vue'
/// 声明定义一下echart
let echart = echarts

/**
 * 注册周期。
 */
onMounted(() => {
	initChart()
})

/**
 * 数据发生变化时。
 */
onUpdated(() => {
	initChart()
})
//
// onUnmounted(() => {
// 	echart.dispose(document.getElementById('myEcharts'))
// })

// 基础配置一下Echarts。
const initChart = function initChart() {
	let chart = echart.init(document.getElementById('echarts-hygrometer'), null)
	// 把配置和数据放这里。
	chart.setOption({
		series: [
			{
				type: 'gauge',
				startAngle: 200,
				endAngle: -20,
				center: ['50%', '60%'],
				radius: '70%',
				min: 0,
				max: 100,
				splitNumber: 8,
				axisLine: {
					lineStyle: {
						width: 6,
						color: [
							[0.4, '#7CFFB2'],
							[0.75, '#FDDD60'],
							// [0.75, '#58D9F9'],
							[1, '#FF6E76']
						]
					}
				},
				pointer: {
					icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
					length: '70%',
					width: 10,
					offsetCenter: [0, '-10%'],
					itemStyle: {
						color: 'auto'
					}
				},
				axisTick: {
					length: 12,
					lineStyle: {
						color: 'auto',
						width: 1
					}
				},
				splitLine: {
					length: 20,
					lineStyle: {
						color: 'auto',
						width: 3
					}
				},
				axisLabel: {
					color: '#464646',
					fontSize: 10,
					distance: -50,
					rotate: 'tangential',
					formatter: function (value) {
						if (value === 87.5) {
							return '高';
						} else if (value === 62.5) {
							return '中';
						}
								// else if (value === 37.5) {
								//   return '低';
						// }
						else if (value === 25) {
							return '低';
						}
						return '';
					}
				},
				title: {
					offsetCenter: [0, '-10%'],
					fontSize: 15
				},
				detail: {
					fontSize: 15,
					lineHeight: 20,
					offsetCenter: [0, '35%'],
					valueAnimation: true,
					formatter: function (value) {
						return Math.round(value * 1.0) +' %\n湿度';
					},
					// color: 'inherit'
					color: '#aaa'
				},
				data: [
					{
						value: 65.5,
						// name: '湿度'
					}
				]
			}
		]
	})
	window.onresize = function() {
		//自适应大小
		chart.resize()
	}
}



</script>

<style scoped lang="less">

</style>